<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>产品详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="css/sm.css">
    <link rel="stylesheet" type="text/css" href="css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="css/layout.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_i3ztchhrqjx7p66r.css">
</head>

<body>
    <div class="page-group">
        <div class="page">
            <!--搜索栏内容 !-->
            <header class="bar bar-nav  product-bar">
                <a class="icon icon-left pull-left" href="classBranch.html">返回</a>
                <h1 class="title">XX商品</h1>
            </header>
            <!--内容部分 !-->
            <div class="content product-content">
                <!--列表页面 !-->
                <!-- 幻灯片Slider -->
                <div class="swiper-container" data-space-between='10'>
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="http://img.alicdn.com/bao/uploaded/i1/TB1QZD1PVXXXXaXXVXXXXXXXXXX_!!0-item_pic.jpg_640x640q50.jpg" alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://img.alicdn.com/bao/uploaded/i1/1644258287/TB2cT9gjVXXXXcDXpXXXXXXXXXX_!!1644258287.jpg_760x760Q50s50.jpg_.webp">
                        </div>
                        <div class="swiper-slide">
                            <img src="http://img.alicdn.com/bao/uploaded/i1/1644258287/TB2MB6LepXXXXb2XXXXXXXXXXXX_!!1644258287.png_760x760Q50s50.jpg_.webp">
                        </div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
                <!-- 商品详情 -->
                <div class="product-card card ">
                    <div class="card-header no-border">
                        <div class="list-block media-list">
                            <ul>
                                <li>
                                    <div class="item-inner">
                                        <div class="item-title">【京东超市】清风（APP)抽纸 柔软2层200抽软抽*20包纸巾（整箱售卖）</div>
                                        <div class="item-title-row">
                                            <div class="item-title"><strong>￥36.00</strong></div>
                                            <div class="item-after"><span class="icon iconfont icon-fenxiang"></span></div>
                                        </div>
                                        <div class="item-title-row">
                                            <div class="item-subtitle">快递：免运费</div>
                                            <div class="item-subtitle">月销510笔</div>
                                            <div class="item-subtitle">广东广州</div>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 促销信息 -->
                <div class="promotion-card  card">
                    <div class="card-content">
                        <div class="list-block">
                            <ul>
                                <li class="item-content">
                                    <div class="item-title">
                                        <span>促销</span>
                                        <span>满39.9元加24.5元可以在购物车换购热销商品</span>
                                    </div>
                                </li>
                                <li class="item-content">
                                    <div class="item-title">
                                        <span>积分</span>
                                        <span>购买可得26积分</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 数量信息 -->
                <div class="please-card card">
                    <div class="card-content">
                        <div class="list-block">
                            <ul>
                                <li>
                                    <a href="#" class="item-link item-content" id="specBtn">
                                        <div class="item-media"><i class="icon icon-f7"></i></div>
                                        <div class="item-inner">
                                            <div class="item-title">
                                                选择尺码，主要颜色
                                            </div>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- 数量信息弹出框 -->
                <div class="spec-popup  popup popup-about">
                    <div class="ctrl-ui-sku">
                        <div class="sku-pro">
                            <div>
                                <img src="http://img.alicdn.com/imgextra/i4/595412874/TB2MaV.mBNkpuFjy0FaXXbRCVXa_!!595412874.jpg_120x120q50s150.jpg">
                                <div class="sku-pro-info">
                                    <div>
                                        <p class="price">￥124</p>
                                        <p class="quantity">库存:2694</p>
                                        <p class="sku-txt"><span class="c-sku"></span><span class="unc-sku">请选择: 尺码 颜色分类</span></p>
                                    </div>
                                </div>
                                <div class="close-popup"><span class="icon iconfont icon-guanbi"></span></div>
                            </div>
                        </div>
                        <div class="sku-info">
                            <div>
                                <h2>尺码</h2>
                                <ul>
                                    <li class="normal">S</li>
                                    <li class="normal">M</li>
                                </ul>
                            </div>
                            <div>
                                <h2>颜色分类</h2>
                                <ul>
                                    <li class="normal">红色</li>
                                    <li class="normal">蓝色</li>
                                </ul>
                            </div>
                            <div>
                                <h2>购买数量</h2>
                                <div class="quantity-info">
                                    <a class="btn reduce" min="1" id="sub" href="javascript:void(0);">-</a>
                                    <input type="text" min="1" value="1" id="bookNum">
                                    <a class="btn plus" max="1366">+</a>
                                </div>
                            </div>
                        </div>
                        <p class="buttons-row"><a href="#" id="joinCartBtn">加入购物车</a><a href="#" id="purchaseBtn">立即购买</a></p>
                    </div>
                </div>
                <!-- 标签页 -->
                <div class="buttons-tab">
                    <a href="#goodsDet-tab" class="tab-link active button">商品详情</a>
                    <a href="#userEva-tab" class="tab-link button">用户评价</a>
                    <a href="#moreRec-tab" class="tab-link button">更过推荐</a>
                </div>
                <div class="tabs">
                    <div id="goodsDet-tab" class="tab active">
                        <img src="https://img.alicdn.com/imgextra/i3/1644258287/TB29UGAcU5O.eBjSZFxXXaaJFXa_!!1644258287.jpg_790x10000Q30.jpg">
                        <img src="https://img.alicdn.com/imgextra/i2/1644258287/TB2ecWGcNeK.eBjSZFlXXaywXXa_!!1644258287.jpg_790x10000Q30.jpg_.webp">
                    </div>
                    <div id="userEva-tab" class="tab">
                        <div class="list-block media-list">
                            <ul>
                                <li>
                                    <div class="item-inner">
                                        <div class="item-subtitle"><img src="http://storage.360buyimg.com/i.imageUpload/3231303234373732332d37363738343131343539393632323233353831_sma.jpg"><span>卢之</span></div>
                                        <div class="item-text">很不错，价格不算贵，我还专门和清feng做了一下对比，我家现在用的是清，图2被压在下面的是维，摸起来纸质比清细绵。图3右面细的是清，毛边程度差不多，但是撕的时候听声音维比较绵，清比较脆。图4沾水后上面是维，韧性比较好，清沾水后很容易就撕烂了～总体下来还是维比较好！过节买的，也比较划算东西很不错，价格不贵，物品是</div>
                                        <div class="item-after">17:14</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="list-block media-list">
                            <ul>
                                <li>
                                    <div class="item-inner">
                                        <div class="item-subtitle"><img src="http://storage.360buyimg.com/i.imageUpload/3231303234373732332d37363738343131343539393632323233353831_sma.jpg"><span>卢之</span></div>
                                        <div class="item-text">很不错，价格不算贵，我还专门和清feng做了一下对比，我家现在用的是清，图2被压在下面的是维，摸起来纸质比清细绵。图3右面细的是清，毛边程度差不多，但是撕的时候听声音维比较绵，清比较脆。图4沾水后上面是维，韧性比较好，清沾水后很容易就撕烂了～总体下来还是维比较好！过节买的，也比较划算东西很不错，价格不贵，物品是</div>
                                        <div class="item-after">17:14</div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div id="moreRec-tab" class="tab">
                        <div class="moreRec">
                            <div class="card">
                                <div class="card-content">
                                    <img src="http://gw.alicdn.com/bao/uploaded/i1/TB1GtT7OFXXXXXfXVXXXXXXXXXX_!!0-item_pic.jpg_360x360q50s150.jpg_.webp" class="" data-size="345x347" data-src-checked="true">
                                    <div class="item-text">狮王 细齿洁牙龈倍护牙刷 柔软进口刷毛 防止牙龈出血 月子牙刷</div>
                                    <div class="item-subtitle">￥75.50</div>
                                </div>
                                <div class="card-content">
                                    <img src="http://gw.alicdn.com/bao/uploaded/i1/TB1GtT7OFXXXXXfXVXXXXXXXXXX_!!0-item_pic.jpg_360x360q50s150.jpg_.webp" class="" data-size="345x347" data-src-checked="true">
                                    <div class="item-text">狮王 细齿洁牙龈倍护牙刷 柔软进口刷毛 防止牙龈出血 月子牙刷</div>
                                    <div class="item-subtitle">￥75.50</div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-content">
                                    <img src="http://gw.alicdn.com/bao/uploaded/i1/TB1GtT7OFXXXXXfXVXXXXXXXXXX_!!0-item_pic.jpg_360x360q50s150.jpg_.webp" class="" data-size="345x347" data-src-checked="true">
                                    <div class="item-text">狮王 细齿洁牙龈倍护牙刷 柔软进口刷毛 防止牙龈出血 月子牙刷</div>
                                    <div class="item-subtitle">￥75.50</div>
                                </div>
                                <div class="card-content">
                                    <img src="http://gw.alicdn.com/bao/uploaded/i1/TB1GtT7OFXXXXXfXVXXXXXXXXXX_!!0-item_pic.jpg_360x360q50s150.jpg_.webp" class="" data-size="345x347" data-src-checked="true">
                                    <div class="item-text">狮王 细齿洁牙龈倍护牙刷 柔软进口刷毛 防止牙龈出血 月子牙刷</div>
                                    <div class="item-subtitle">￥75.50</div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-content">
                                    <img src="http://gw.alicdn.com/bao/uploaded/i1/TB1GtT7OFXXXXXfXVXXXXXXXXXX_!!0-item_pic.jpg_360x360q50s150.jpg_.webp" class="" data-size="345x347" data-src-checked="true">
                                    <div class="item-text">狮王 细齿洁牙龈倍护牙刷 柔软进口刷毛 防止牙龈出血 月子牙刷</div>
                                    <div class="item-subtitle">￥75.50</div>
                                </div>
                                <div class="card-content">
                                    <img src="http://gw.alicdn.com/bao/uploaded/i1/TB1GtT7OFXXXXXfXVXXXXXXXXXX_!!0-item_pic.jpg_360x360q50s150.jpg_.webp" class="" data-size="345x347" data-src-checked="true">
                                    <div class="item-text">狮王 细齿洁牙龈倍护牙刷 柔软进口刷毛 防止牙龈出血 月子牙刷</div>
                                    <div class="item-subtitle">￥75.50</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <nav class="bar bar-tab" id="tool-bar">
                <a class="tab-item external" href="#">
                    <span class="icon iconfont icon-shoucang"></span>
                    <span class="tab-label">收藏</span>
                </a>
                <a class="tab-item external" href="#">
                    <span class="icon iconfont icon-gouwuche"></span>
                    <span class="tab-label">购物车</span>
                </a>
                <a href="shoppingCart.html" class="tab-item" id="joinBtn">加入购物车</a>
                <a href="#" class="tab-item" id="purchaseBtn">立即购买</a>
            </nav>
        </div>
    </div>
    <script type='text/javascript' src='js/lib/zepto.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/lib/sm.js' charset='utf-8'></script>
    <script type='text/javascript' src='js/lib/sm-extend.js' charset='utf-8'></script>
    <script type='text/javascript' src="js/productDetails.js"></script>
</body>

</html>
